<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {editStation} from "@/api/demoApi";
import {message} from "@/utils/message";

defineOptions({
  name: "publicDialog"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref({
  id: null,
  stationNo:null,
  planName:null,
  coordinatPerson: null,
  headPerson: null,
  buildPerson: null,
  adminPerson: null,
  otherPerson: null,
  status: 2,
  publicTime: null
})

//表单校验
const formRules = ref({
  stationNo:[{required:true,message:'请输入更新后编号',trigger:'blur'}],
  planName:[{required:true,message:'请输入规划站名',trigger:'blur'}],
})

//业主选项
const personOptions = [
  {value:'17594808737',label:'于欣汝'},
  {value:'13463378501',label:'曾益冉'},
  {value:'14975610801',label:'雷娜'},
  {value:'15577894970',label:'邹语晨'},
  {value:'18252409609',label:'胡泽惠'},
  {value:'18132474825',label:'姚淑华'},
]
/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
//弹框显示
const dialogShow = (title: string,data: object)=>{
  dialogTitle.value = title
  formData.value = {...data}
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//取消
const form = ref()
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.resetFields()
    formData.value = {
      id: null,
      stationNo:null,
      planName:null,
      coordinatPerson: null,
      headPerson: null,
      buildPerson: null,
      adminPerson: null,
      otherPerson: null,
      status: 2,
      publicTime: null
    }
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.validate()
    //todo 新增、编辑接口
    formData.value.status = 2
    formData.value.publicTime = new Date().toLocaleString()
    editStation(formData.value)
    message("指派成功", { type: "success" });
    await handlerCancel()
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
</script>

<template>
  <PageDialog ref="dialog" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle" width="55%">
    <el-form ref="form" :model="formData" :rules="formRules" label-position="top" label-width="auto">
      <el-form-item label="更新后编号" prop="stationNo">
        <el-input v-model="formData.stationNo" clearable disabled placeholder="请输入更新后编号" />
      </el-form-item>
      <el-form-item label="规划站名" prop="planName">
        <el-input v-model="formData.planName" clearable disabled placeholder="请输入规划站名" />
      </el-form-item>
      <el-form-item label="区域管理员" prop="adminPerson">
        <el-select v-model="formData.adminPerson" clearable filterable placeholder="请选择区域管理员" >
          <el-option v-for="(item,index) in personOptions" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="headPerson">
        <el-select v-model="formData.headPerson" clearable filterable placeholder="请选择负责人" >
          <el-option v-for="(item,index) in personOptions" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="协调人" prop="coordinatPerson">
        <el-select v-model="formData.coordinatPerson" clearable filterable placeholder="请选择协调人" >
          <el-option v-for="(item,index) in personOptions" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="建维人" prop="buildPerson">
        <el-select v-model="formData.buildPerson" clearable filterable placeholder="请选择建维人" >
          <el-option v-for="(item,index) in personOptions" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="编外人员" prop="otherPerson">
        <el-input v-model="formData.otherPerson" clearable placeholder="请输入编外人员" />
      </el-form-item>
    </el-form>
  </PageDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .el-form-item {
    width: 48%;

    .el-input,
    .el-select {
      width: 100%;
    }
  }
}
</style>
